<template>
	<view>
		<statusBar></statusBar>
		<view class="header">
			<!-- head left -->
			<view @tap="message"><image src="../../static/assert/xiaoxi.png" class="drawer-icon"></image></view>
			<view>
				<text class="symbol-text">{{ lang.symbol }}</text>
			</view>
			<!-- head right -->
			<view><image src="../../static/assert/search-icon.png" class="more-icon" @tap="$nav('./search')"></image></view>
		</view>
		<!-- 轮播图 -->
		<view class="page-section-spacing" @tap="$nav('./notice/activity')">
			<swiper :style="{ height: swierHeight + 'px' }" class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item><image style="width: 100%;height: 366upx;" src="../../static/assert/1.jpg" mode=""></image></swiper-item>
				<swiper-item><image style="width: 100%;height: 366upx;" src="../../static/assert/2.jpg" mode=""></image></swiper-item>
				<swiper-item><image style="width: 100%;height: 366upx;" src="../../static/assert/3.jpg" mode=""></image></swiper-item>
			</swiper>
		</view>
		<!-- 通知 -->
		<view class="notice-one">
			<view class="image-one"><image src="../../static/assert/tongzhi.png" mode=""></image></view>
			<view class="chargeone">
				<swiper
					class="_swiper tc"
					@change="slideChange"
					:indicator-dots="false"
					autoplay="true"
					:interval="4000"
					circular="true"
					display-multiple-items="2"
					:duration="8000"
					:circular="true"
					@tap="$nav('./notice/announcement')"
				>
					<swiper-item><view class="swiper-item"></view></swiper-item>
					<swiper-item><view class="swiper-item"></view></swiper-item>
					<swiper-item v-for="(item, index) in list" :key="index">
						<view class="swiper-item ">{{ item.title }}</view>
					</swiper-item>
				</swiper>
			</view>
		</view>

		
	

		<!-- 币种 限价列表 -->
		<view class="container">
			<!--币种选择  -->
			<view class="coin-segment">
				<text class="coin-name" v-for="(item, index) in motherCoinNames" v-bind:id="index" :class="{ actived: current == index }" @tap="coinNamecurrent">{{item }}</text>
			</view>

			<!-- 币种列表 -->
			<marketList :list="marketList"></marketList>
		</view>
	
	</view>
</template>

<script>
import { mapActions, mapGetters, mapState } from 'vuex';
import marketList from '../../components/marketList.vue';
import { getlist, regularAnnouncement, getMotherCoinName } from '@/api/assert.js';
export default {
	data() {
		return {
			symbol: '行情',
			marketList: [],
			motherCoinNames: [],
			// coinNamecurrent: 1,
			current: 1,
			timer: null,
			list: ['123', '123', '123'],
			interverFlag: false,
			background: ['color1', 'color2', 'color3'],
			indicatorDots: false,
			autoplay: true,
			interval: 2000,
			duration: 500,
			flag: true
		};
	},
	async onLoad() {
		this.SSS();
		regularAnnouncement().then(res => {
			if (res.data.code == 200) {
				this.list = res.data.data;
			}
			try {
				this.list = JSON.parse(res.data).data;
			} catch (e) {
				this.list = res.data.data;
			}
		});
		// this.getData(this.current);
		//获取BTC和USDT
		const res = await getMotherCoinName();
		this.motherCoinNames = res.data.data;
		// getMotherCoinName().then(
		// 	res => {
		// 		this.motherCoinNames = res.data.data;
		// 	}
		// 	// err => {
		// 	// 	//服务异常 就不执行定时
		// 	// 	clearInterval(this.timer);
		// 	// }
		// );
		const currentRes = await getlist(this.motherCoinNames[this.current]);
		this.marketList = currentRes.data.data;
		// getlist(this.motherCoinNames[this.current]).then(
		// 	res => {
		// 		res = res.data;
		// 		console.log(res, '222222222222222222');
		// 		if (res.code == 200) {
		// 			this.interverFlag = true;
		// 			this.marketList = JSON.parse(JSON.stringify(res.data));
		// 			this.setList(this.marketList);
		// 		}
		// 	}
		// 	// err => {
		// 	// 	//服务异常 就不执行定时
		// 	// 	clearInterval(this.timer);
		// 	// }
		// );
		// this.$showLoading('数据加载中..')
		//进入队列 防止 getter未加载
		// setTimeout(() => {
		// 	this.getData(true);
		// }, 100);
	},
	mounted() {
		this.flags();
	},
	computed: {
		// ...mapGetters(['motherCoinNames']),
		...mapState(['lang']),
		swierHeight() {
			return uni.getSystemInfoSync().windowHeight;
		}
	},
	watch: {
		current() {
			// this.$showLoading('数据加载中..')
			// this.getData(true);
		}
	},
	components: {
		marketList
	},
	onNavigationBarButtonTap(e) {
		switch (e.index) {
			case 0:
				break;
			case 1:
				this.$nav('./search');
				break;
		}
	},
	onUnload() {
		// clearInterval(this.timer);
	},
	methods: {
		SSS(){
			console.log(this.lang,8888)
			if(this.lang.buy=="buy"){
				uni.setTabBarItem({
				  index: 0,
				  text:"market"
				 
				})
				uni.setTabBarItem({
				  index: 1,
				  text:"COINS"
				 
				})
				uni.setTabBarItem({
				  index: 2,
				  text:"contract"
				 
				})
                uni.setTabBarItem({
                  index: 3,
                  text:"second"
                 
                })
				uni.setTabBarItem({
				  index: 4,
				  text:"assets"
				 
				})
				uni.setTabBarItem({
				  index: 5,
				  text:"mine"
				 
				})
			}else{
				uni.setTabBarItem({
				  index: 0,
				  text:"行情"
				 
				})
				uni.setTabBarItem({
				  index: 1,
				  text:"币币"
				 
				})
				uni.setTabBarItem({
				  index: 2,
				  text:"合约"
				 
				})
                uni.setTabBarItem({
                  index: 3,
                  text:"秒合约"
                 
                })
				uni.setTabBarItem({
				  index: 4,
				  text:"资产"
				 
				})
				uni.setTabBarItem({
				  index: 5,
				  text:"我的"
				 
				})
			}
		},
		getData(current) {
			console.log(current, '1111111111111111111111111111111111111111');
			// getlist(this.motherCoinNames[current]).then(
			// 	res => {
			// 		res = res.data;
			// 		console.log(res, '222222222222222222');
			// 		if (res.code == 200) {
			// 			this.interverFlag = true;
			// 			this.marketList = JSON.parse(JSON.stringify(res.data));
			// 			this.setList(this.marketList);
			// 		}
			// 	}
			// 	// err => {
			// 	// 	//服务异常 就不执行定时
			// 	// 	clearInterval(this.timer);
			// 	// }
			// );
		},
		flags() {
			uni.getStorage({
				key: 'flag',
				success(e) {
					if (e.data) {
						console.log(321321321);
						uni.navigateBack();
						uni.setStorage({
							key: 'flag',
							data: false
						});
					}
				}
			});
		},
		slideChange() {},
		changeIndicatorDots(e) {
			this.indicatorDots = !this.indicatorDots;
		},
		changeAutoplay(e) {
			this.autoplay = !this.autoplay;
		},
		intervalChange(e) {
			this.interval = e.target.value;
		},
		durationChange(e) {
			this.duration = e.target.value;
		},
		// 跳转
		message() {
			uni.navigateTo({
				//里面是一个对象形式的参数
				url: 'message'
			});
		},
		...mapActions('quotation', ['setList']),
		// intervalGetData() {
		// 	this.timer = setInterval(() => {
		// 		if (!interverFlag) {
		// 			return interverFlag;
		// 		}
		// 		this.getData();
		// 	}, 5000);
		// },
		async coinNamecurrent(e) {
			// console.log(parseInt(e.target.id))
			const res = await getlist(this.motherCoinNames[parseInt(e.target.id)]);
			console.log(res.data);
			// this.marketList = JSON.parse(JSON.stringify(res.data));
			this.marketList = res.data.data;
			this.current = e.target.id;
			console.log(this.current);
			// if (this.current == e.target.id) {
			// 	this.current = e.target.id;
			// }
			// getlist(this.motherCoinNames[parseInt(e.target.id)]).then(
			// 	res => {
			// 		res = res.data;
			// 		console.log(res,'222222222222222222')
			// 		// if (res.code == 200) {
			// 		// 	this.interverFlag = true;
			// 		// 	this.marketList = JSON.parse(JSON.stringify(res.data));
			// 		// 	this.setList(this.marketList);
			// 		// }
			// 	},
			// 	// err => {
			// 	// 	//服务异常 就不执行定时
			// 	// 	clearInterval(this.timer);
			// 	// }
			// );
		}
		// getData(loading) {
		// 	// debugger
		// 	console.log(this.motherCoinNames,'33333333333333333333333')
		// 	console.log(this.coinNamecurrent,'55555555555555555')
		// 	// getlist(this.motherCoinNames[this.coinNamecurrent]).then(
		// 	// 	res => {
		// 	// 		res = res.data;
		// 	// 		console.log(res,'222222222222222222')
		// 	// 		if (res.code == 200) {
		// 	// 			this.interverFlag = true;
		// 	// 			this.marketList = JSON.parse(JSON.stringify(res.data));
		// 	// 			this.setList(this.marketList);
		// 	// 		}
		// 	// 	},
		// 	// 	err => {
		// 	// 		//服务异常 就不执行定时
		// 	// 		clearInterval(this.timer);
		// 	// 	}
		// 	// );
		// },
	}
};
</script>

<style lang="scss" scoped>
.header > view {
	display: flex;
	align-items: center;
}
.page-section-spacing {
	width: 100%;
	height: 366upx;
}
.notice-one {
	width: 100%;
	height: 75upx;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0upx 3upx 8upx 1upx rgba(153, 153, 153, 0.09);
	border-radius: 5upx;
	// padding: 0 20upx;
	display: flex;
	align-items: center;
	position: relative;
	z-index: 999;
}
.image-one image {
	width: 36upx;
	height: 30upx;
	align-items: center;
	justify-content: center;
	margin-left: 30upx;
}
.chargeone {
	font-size: 28upx;
	font-family: PingFang SC;
	font-weight: 400;
	color: rgba(51, 51, 51, 1);
	margin-left: 21upx;
	flex: 1;
}
.header {
	display: flex;
	height: 90upx;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0 30upx;
	box-sizing: border-box;
	margin-top: 30upx;
}

.drawer-icon {
	width: 30upx;
	height: 30upx;
}
.more-icon {
	width: 29upx;
	height: 31upx;
}
.chart-icon {
	width: 37upx;
	height: 35upx;
	margin-right: 52upx;
}
.symbol-text {
	text-align: center;
	font-size: 36upx;
}
.container {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.Segment {
	display: flex;
	padding: 0 30upx;
	box-sizing: border-box;
}

.Segment > text {
	height: 80upx;
	width: 20%;
	line-height: 80upx;
	text-align: center;
	border: 2px solid #e0e0e0;
	border-radius: 1px;
	box-sizing: border-box;
	color: #999999;
	font-family: PingFang-SC-Regular;
	border-right: 0;
}

.Segment > text:last-child {
	border: 2px solid #e0e0e0;
}

.coin-segment {
	padding: 0 30upx;
	margin-top: 20upx;
	border-bottom: 1px solid #e8e8e8;
}

.coin-name {
	font-size: 28px;
	font-family: PingFang-SC-Bold;
	font-weight: bold;
	color: rgba(175, 174, 174, 1);
	display: inline-block;
	padding: 0 9upx;
	text-align: center;
	position: relative;
	margin-left: 20upx;
	padding-bottom: 14upx;
}

.coin-name.actived {
	color: #457fd0;
	border-bottom: 1px solid #457fd0;
}

.coin-name.actived:after {
	content: ' ';
	position: absolute;
	height: 2px;
	width: 100%;
	bottom: 0;
	left: 0;

	background-color: #457fd0;
}

.Segment > text.actived {
	box-sizing: border-box;
	background-color: #457fd0;
	color: #fff;
}

.tab-bar {
	display: flex;
	margin: 20upx 20upx;
	border: 2upx solid #cfcfcf;
	border-radius: 10upx;
}

.tab-bar .tab-bar-item {
	text-align: center;
	height: 70upx;
	line-height: 70upx;
}

.tab-bar .active {
	background: #1478ca;
	color: #ffffff;
}

.rank {
	padding: 10px 0px;
}

.rank .title {
	padding: 10px 20px;
}

.rank .item {
	display: flex;
	padding: 20px 20px;
}

.rank .item .n {
	width: 35%;
}

.rank .item .p {
	width: 35%;
}

.rank .item .t {
	width: 30%;
	text-align: right;
}

.rank .item .t .light {
	display: block;
	width: 150px;
	color: #ffffff;
	text-align: center;
	float: right;
	border-radius: 4upx;
}

._notice {
	position: fixed;
	left: 0;
	top: 0;
	/* #ifdef H5 */
	top: 88upx;
	/* #endif */
	z-index: 9;
	width: 100%;
	background: rgba(72, 1, 1, 0.3);
	font-size: 20upx;

	height: 75upx;
	color: #ffffff;
	border-radius: 6upx;
	overflow: hidden;
	box-sizing: border-box;
}
._swiper {
	height: 75upx;
}
.swiper-item {
	line-height: 75upx;
	padding-left: 80px;
}
/deep/uni-swiper .uni-swiper-slide-frame {
	width: 100% !important;
	position: relative !important;
}
// 币种
.Kind {
	display: flex;
	justify-content: space-between;
	padding: 0 30upx;
	margin-top: 30upx;
	position: relative;
	z-index: 9999999;
	& > view {
		text-align: center;
		& > p:nth-child(1) {
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #2d2f56;
		}
		& > p:nth-child(2) {
			color: #4cdfb0;
			font-size: 26upx;
		}
		& > p:nth-child(3) {
			color: #4cdfb0;
			font-size: 26upx;
		}
		& > p:nth-child(4) {
			font-size: 26upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(140, 151, 157, 1);
		}
	}
}

// 法币
.Fiatdeal {
	background: #f7f7fb;
	width: 100%;
	display: flex;
	justify-content: space-around;
	padding-top: 20upx;
	padding-bottom: 20upx;
	position: relative;
	z-index: 9999999;
	// 左边
	.Fiatdeal-left {
		width: 45%;
		height: 150upx;
		background: #ffffff;
		display: flex;
		align-items: center;
		padding: 0 20upx;

		& > view:nth-child(1) {
			width: 50%;
			font-size: 23upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(140, 151, 157, 1);
		}
		& > view:nth-child(2) image {
			width: 177upx;
			height: 103upx;
		}
	}
	// 右边
	.Fiatdeal-right {
		width: 45%;
		height: 150upx;
		margin: 0 auto;
		& > view:nth-child(1) {
			width: 100%;
			height: 65upx;
			background: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			& > view:nth-child(1) image {
				width: 30upx;
				height: 30upx;
				display: flex;
			}
			& > view:nth-child(2) {
				font-size: 23upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(140, 151, 157, 1);
				margin-left: 20upx;
			}
		}
		& > view:nth-child(2) {
			width: 100%;
			height: 65upx;
			background: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 20upx;
			& > view:nth-child(1) image {
				width: 30upx;
				height: 30upx;
				display: flex;
			}
			& > view:nth-child(2) {
				font-size: 23upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(140, 151, 157, 1);
				margin-left: 20upx;
			}
		}
	}
}
</style>
